<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>更改密码</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .edit-panel{
            width: 1400px;
            height: 830px;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            border-radius: 12px;
        }
        .edit-panel .form-control{
            width: 300px !important;
            height: 40px;
            background: #FFFFFF;
            border: 1px solid #CCCCCC;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .edit-panel .input-group{
            display: flex !important;
            flex-direction: column;
        }
        .edit-panel .btn-primary{
            width: 300px !important;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #347AE8;
            border-radius: 4px;
        }
    </style>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div>
    <c:if test="${!empty succ}">
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
                ${succ}
        </div>
    </c:if>
    <c:if test="${!empty error}">
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
                ${error}
        </div>
    </c:if>
</div>
<div>
    <div class="edit-panel">
        <form method="post" action="admin_repasswd_do" class="form-inline" id="repasswd">
            <div class="input-group">
                <label for="oldPasswd">旧密码</label>
                <input type="password" id="oldPasswd" name="oldPasswd" placeholder="输入旧密码" class="form-control"
                       class="form-control">
                <label for="newPasswd">新密码</label>
                <input type="password" id="newPasswd" name="newPasswd" placeholder="输入新密码" class="form-control"
                       class="form-control">
                <label for="reNewPasswd">确认密码</label>
                <input type="password" id="reNewPasswd" name="reNewPasswd" placeholder="再次输入新密码"
                       class="form-control" class="form-control">
                <em id="tishi" style="color: red"></em>
                <br/>
                <span>
                    <input type="submit" value="提交" class="btn btn-primary">
                </span>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).keyup(function () {
        if ($("#newPasswd").val() != $("#reNewPasswd").val() && $("#newPasswd").val() != "" && $("#reNewPasswd").val() != "" && $("#newPasswd").val().length == $("#reNewPasswd").val().length) {
            $("#tishi").text("两次输入的新密码不同，请检查");
        } else {
            $("#tishi").text("");
        }
    })

    $("#repasswd").submit(function () {
        if ($("#oldPasswd").val() == '' || $("#newPasswd").val() == '' || $("#reNewPasswd").val() == '') {
            $("#tishi").text("请填写完毕后提交");
            return false;
        } else if ($("#newPasswd").val() != $("#reNewPasswd").val()) {
            $("#tishi").text("两次输入的新密码不同，请检查");
            return false;
        }
    })
</script>
</body>
</html>
